<template>
    <div>
        <TopOne :obj="obj" :getYao="getYao" :datalist="getdataOne" />
        <div class="customTodo_body">
            <TopTwo :todoButton="todoButton" />

            <!-- columns 对应表格列以及每列名称 -->
            <!-- dataFinance 对应的数据 -->
            <!-- operate 操作的信息 显示哪些操作 以及对应的方法 -->
            <!-- detailText 用于显示点击第一列数据 跳转到的位置 -->
            <Table :columns="columns" :data="dataFinance" :operate="operate" :detailText="detailText"
                style="width: 100%; margin-top: 20px;"></Table>
        </div>
        <!-- 弹框 -->
        <mockBox v-if="open" :open="open" :handleOk="handleOk" :data="dataFinance" />
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed, reactive } from 'vue'
import TopOne from "../../components/topOne.vue";
import TopTwo from "../../components/topTwo.vue";
//table表格来进行封装
import Table from "@/components/Table.vue"
import { useCounterStore } from '@/store/ticket'
//排序约束
import type { TableColumnType } from 'ant-design-vue';

// 引入弹框
import mockBox from '@/components/financeBox/mockBox.vue';
import mockOne from '@/components/financeBox/mockOne.vue';
import router from '@/router';

// // 路由
// import { useRouter } from 'vue-router';
// const router = useRouter();



const store = useCounterStore();
// 传给第一个input框的数据
const obj = {
    // 第一个输入框
    inputOne: {
        done: true,
        tishi: "搜索关键词",
    },
    // 后面倒数第二个带小人的输入框
    inputTwo: {
        done: true,
        tishi: "订单所属人员",
    },
    // 日历输入框
    inputThere: {
        done: true,
        tishi: "计划回款日期",
    },
    // 3个下拉列表
    selectOne: {
        done: true,
        tishi: "回款状态",
        todoDone: [
            {
                value: "已完成",
                label: "已完成",
            },
            {
                value: "未完成",
                label: "未完成",
            },
            {
                value: "已逾期",
                label: "已逾期",
            }
        ],
    },
    selectTwo: {
        done: true,
        tishi: "订单所属部门",
        todoDone: [
            {
                value: "A部",
                label: "A部",
            },
            {
                value: "B部",
                label: "B部",
            },
        ],
    },
    selectThere: {
        done: false,
        tishi: "客户星级",
        todoDone: [
            {
                label: "⭐",
                value: "1",
            },
            {
                label: "⭐⭐",
                value: "2",
            },
            {
                label: "⭐⭐⭐",
                value: "3",
            },
        ],
    },
};


// 按钮
const todoButton = [
    { id: 1, name: '添加', fn: addOne, icon: '&#xe613;' },
    { id: 2, name: '导入', icon: '&#xe637;' },
    { id: 3, name: '导出', icon: '&#xe61b;' },
    //   { id: 4, name: '新建任务', icon: '&#xe697;' },
    //   { id: 5, name: '转移客户', icon: '&#xea34;' },
    //   { id: 6, name: '移入公海', icon: '&#xe804;' },
    //   { id: 7, name: '合并客户', icon: '&#xe628;' },
    //   { id: 8, name: '批量编辑', icon: '&#xe65d;' },
]
// 声明弹框状态
const open = ref<boolean>(false);
function addOne() {
    console.log("open", open.value)
    // open.value = true;
}
// 弹框开关
const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};






let dataFinance = ref<any[]>()
// 获取数据
const getdataOne = async () => {
    try {
        // const res = await getfinanceData()
        const res = await store.interface_getfinance()
        dataFinance.value = res
    } catch (error) {
        console.error(error);
    }
}

// 要求
function getYao(value: any) {
    console.log(value);
    if (value.inputOne) {
        dataFinance.value = dataFinance.value?.filter(item => {
            if (item.name.indexOf(value.inputOne) != -1) {
                return item
            }
        })
    }
    if (value.selectOne) {
        dataFinance.value = dataFinance.value?.filter(item => item.done == value.selectOne)
    }
    if (value.selectTwo) {
        dataFinance.value = dataFinance.value?.filter(item => item.typeOne == value.selectTwo)
    }
    if (value.inputTwo) {
        dataFinance.value = dataFinance.value?.filter(item => {
            if (item.namePeplo.indexOf(value.inputTwo) != -1) {
                return item
            }
        })
    }
    if (value.inputThere) {
        dataFinance.value = dataFinance.value?.filter(item => item.countTime == value.inputThere)
    }
}


onMounted(() => {
    getdataOne()
})

// 表格对应数据
const sortedInfo = ref();


//用来给table传入columns的，他是一个列表，用来表示你自己的字段
const columns = computed<TableColumnType[]>(() => {
    const sorted = sortedInfo.value || {};
    return [
        {
            title: '关联订单',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '订单归属人',
            dataIndex: 'namePeplo',
            key: 'namePeplo',
        },
        {
            title: '回款期次',
            dataIndex: 'dataNum',
            key: 'dataNum',
        },
        {
            title: '计划回款金额',
            dataIndex: 'countNum',
            key: 'countNum',
        },
        {
            title: '已回款金额',
            dataIndex: 'backNum',
            key: 'backNum',
        },
        {
            title: '计划回款日期',
            dataIndex: 'countTime',
            key: 'countTime',
            sorter: {
                compare: (a, b) => a.countTime - b.countTime,
                multiple: 3,
            },
        },
        {
            title: '回款状态',
            dataIndex: 'done',
            key: 'done',
        },
        {
            title: '操作',
            dataIndex: 'differenceInDays',
            key: 'differenceInDays',
            width: '15%',
        },
    ];
});


// 操作页面传入的数据
const operate = ref([
    {
        icon: 'MenuUnfoldOutlined',
        title: '详情',
        click: (_key: any) => { detailOne(_key) }
    },
    {
        icon: '',
        title: '删除',
        // 括号中的为整列信息 可以切换成别的
        click: (_key: any) => { delOne(_key) }
    }
])
// 点击查看详情
const detailOne = (one: any) => {
    router.push('./financeDeil');
}
// 点击删除  ---- 获取整列信息
const delOne = (two: object) => {
    console.log('删除', two);

}

// 点击跳转到详情并传递路由 ----- 用于跳转到详细信息
let detailText = reactive({
    nameOne: "关联订单",
    goTo: "../finance/backguanli"
})
</script>

<style scoped></style>